<template>
  <div class="screenMonitor">
    <div class="abc">
      <div class="a1 a">
        <div class="b1 b">
          <div class="c1 c">
            <headComponent />
          </div>
          <div class="c2 c" >
            <div class="earth_logo">
              <img src="../../assets/screen/2.png" alt="">
              <div class="text_box">
                <p>销售额同比增长</p>
                <p>
                  <span class="iconfont icon-tianjia"></span>
                  <span class="text">34</span>
                  <i>%</i>
                </p>
              </div>
            </div>
            <screen_border />
            <China />
          </div>
        </div>
        <div class="b2 b">
          <div class="c3 c">
            <screen_border />
            <eCharts_2 />
          </div>
          <div class="c4 c">
            <screen_border />
            <eCharts_1 />
          </div>
        </div>
      </div>
      <div class="a2 a">
        <div class="b3 b">
          <div class="c5 c" v-for="(item,index) in orderList" :key="index">
            <screen_border />
            <order_ring  :title="item.title" :percent="item.percent" :orderNum="item.orderNum" />
          </div>
        </div>
        <div class="b4 b">
          <screen_sell_rank />
        </div>
      </div>
    </div>
    <aside>
      <loading1 :loading="loading" />
    </aside>
  </div>
</template>

<script>
  import headComponent from './model/screen_head.vue'
  import China from './model/China.vue'
  import screen_sell_rank from './model/screen_sell_rank.vue'
  import order_ring from './model/order_ring.vue'
  import screen_border from './model/screen_border1.vue'
  import eCharts_2 from './model/echarts_2.vue'
  import eCharts_1 from './model/echarts_1.vue'
  import orderList from '../../apiData/screen/orderList.js'
  export default {
    name: "screenMonitor",  // 大屏监控
    data() {
      return {
        loading: false,
        num: 80,
        orderList: [
          { title: '主平台', percent: 0, orderNum: 0 },
          { title: '平台一', percent: 0, orderNum: 0 },
          { title: '平台二', percent: 0, orderNum: 0 }
        ]
      }
    },
    components: {
      headComponent,
      China,
      screen_sell_rank,
      order_ring,
      eCharts_2,
      eCharts_1,
      screen_border,
    },
    created() {
      this.getData();
      this.$nextTick(() => {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 2000)
      })
    },
    mounted() {
      window.onresize = () => (() => {
        location.reload();
      })();
    },
    methods: {
      getData() {
        let timer = setTimeout(() => {
          this.orderList = orderList;
          clearTimeout(timer)
        },2000)
      },
      numBBB() {
        this.num = 10
      }
    }
  }
</script>

<style scoped lang="scss">
  .screenMonitor {
    width: 100vw;
    height: 100vh;
    background-image: url('../../assets/screen/background.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
    .abc{
      min-width: 1587px;
      height: 100%;
      background-image: linear-gradient(to right, rgba(1,1,4,0.6), rgba(28,46,56,0.6));
    }
    .c2,.c3,.c4,.c5,.c6,.c7{
      position: relative;
    }
    .a1{
      height: calc(100% - 180px);
      display: flex;
      .b1{
        width: calc(100% - 540px);
        .c1{
          height: 120px;
        }
        .c2{
          height: calc(100% - 120px);
          .earth_logo{
            position: absolute;
            top: 40px;
            left: 40px;
            display: flex;
            align-items: center;
            img{
              width: 120px;
              height: 120px;
            }
            .text_box{
              p{
                font-size: 18px;
                color: #f37b1d;
                margin: 4px 0;
                span.iconfont{
                  color: #f00;
                  font-size: 16px;
                }
                span.text{
                  color: #fff;
                  font-size: 22px;
                  font-weight: bold;
                  margin: 0 6px;
                }
                i{
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
      .b2{
        width: 540px;
        .c3{
          height: 30%;
        }
        .c4{
          height: 70%;
        }
      }
    }
    .a2{
      height: 180px;
      display: flex;
      .b3,.b4{
        width: 50%;
      }
      .b3{
        display: flex;
        justify-content: space-between;
        .c{
          width: 33.3%;
        }
      }
    }
  }
</style>
